<template>
  <div>
    {{ getOrderList() }}
    <div class="headDiv">
      <template>
        <span class="queryName">订单编号:</span>
        <el-input v-model="q.orderID" style="width: 250px;font-size: 16px" clearable></el-input>
        <span>下单日期:</span>
        <el-date-picker
          v-model="q.dateStr"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
        <span class="queryBtn"></span>
        <el-button type="warning" size="medium" @click="query">搜索</el-button>
        <span class="queryByStockDateSort">按下单时间排序:</span>
        <el-radio-group v-model="q.sort" @change="query">
          <el-radio-button :label=1>降序</el-radio-button>
          <el-radio-button :label=0>升序</el-radio-button>
        </el-radio-group>
      </template>
    </div>
    <div class="queueBody">
      <el-table :data="orderList" style="width: 100%" :header-cell-style="{background:'#DCDCDC',color:'#606266'}">
        <el-table-column width="200" prop="orderID" label="订单号" header-align="center" align="center"></el-table-column>
        <el-table-column width="200" prop="consumerId" label="顾客编号" header-align="center" align="center"></el-table-column>
        <el-table-column width="200" prop="toOrderTime" label="下单时间" header-align="center"
                         align="center"></el-table-column>
        <el-table-column width="200" prop="receiveTime" label="完成时间" header-align="center"
                         align="center"></el-table-column>
        <el-table-column width="150" label="订单状态" header-align="center" align="center">
          <template slot-scope="s">
            <el-tag :type="s.row.orderStatus === 2?'success':'primary'">{{s.row.orderStatus === 2?'已完成':'已支付'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="150" prop="payStatus" label="支付状态" header-align="center" align="center">
          <template slot-scope="s">
            <el-tag :type="s.row.payStatus === 1?'success':'primary'">{{s.row.payStatus === 1?'已支付':'待支付'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="300" label="商品信息" header-align="center" align="center">
          <template slot-scope="s">
            <el-popover
              placement="bottom"
              width="600"
              trigger="click">
              <span class="goodsSpan" v-for="(o,i) in s.row.orderInfo.goodsList">
                <el-tag>{{ o.drink.name }}</el-tag>
                <el-tag type="success">{{ o.drink.cupSize }} | {{ ((o.drink.price) / 100).toFixed(2) }}元</el-tag>
                <el-tag type="warning">{{ o.drink.tempJsonStr }}</el-tag>
                <el-tag type="danger">{{ o.drink.sweetnessJsonStr }}</el-tag>
                <span class="spanLen"></span>
                <el-tag v-for="(e,n) in o.drink.entremetsList">{{ e.name }} | {{ ((e.price) / 100).toFixed(2) }}元</el-tag>
                <span class="spanLen2"></span>
                <el-tag type="danger">{{ o.count }}份 共{{ ((o.cost) / 100).toFixed(2) }}元</el-tag>
                <br/>
              </span>
              <el-button slot="reference" >详情</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column  label="总花费" header-align="center" align="center">
          <template slot-scope="s">
            <span>{{ ((s.row.cost) / 100).toFixed(2) }}元</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="bodyBottom">
        <div class="bodyBottomPage">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.page"
            :page-sizes="page.pageSizeList"
            :page-size="page.pageSize"
            layout="prev,pager,next,total,sizes"
            :total="page.total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "OrderQueryM",
  data() {
    return {
      refresh: 0,
      q: {
        orderID: '',
        dateStr: null,
        sort: 0,
      },
      page: {
        page: 1,
        pageSizeList: [5,9,25,50],
        pageSize: 9,
        total: 9,
      },
      orderList: []
    }
  },
  methods: {
    getOrderList: function () {
      if (this.refresh === 0) {
        this.refresh++;
        var that = this;
        this.q.orderID = this.q.orderID.trim() === '' ? ' ' : this.q.orderID.trim();
        this.q.stockDate = this.q.stockDate === '' ? ' ' : this.q.stockDate;
        axios.get("http://localhost:8081/order/" + this.q.orderID + '/' + this.q.dateStr + '/' + this.q.sort + '?page=' + this.page.page + '&pageSize=' + this.page.pageSize)
          .then(res => {
            if (res.data.status === 1) {
              that.orderList = res.data.data.list;
              that.page.total = res.data.data.total;
            }
          })
      }
    },
    query:function (){
      this.refresh = 0;
      this.getOrderList();
    },
    handleSizeChange: function (val) {
      this.page.page = 1;
      this.page.pageSize = val;
      this.query();
    },
    handleCurrentChange: function (val) {
      this.page.page = val;
      this.query();
    },
  }
}


</script>

<style scoped>
.queueBody{
  margin-top: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
.bodyBottom {
  height: 60px;
}

.bodyBottomPage {
  margin-top: 30px;
}
</style>
